<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
  <script>
    const {
      reactive,
      readonly,
      shallowReactive,
      shallowReadonly
    } = VueReactivity;

    
    const obj1 = {
      name: 'tom',
      age: {
        num: 99
      }
    }
    const obj2 = {
      name: 'tom',
      age: {
        num: 99
      }
    }
    const reactiveStateState = reactive(obj1);
    const shallowReactiveState = shallowReactive(obj2);
    console.log(reactiveStateState.age, shallowReactiveState.age)

    
    const obj3 = {
      name: 'tom',
      age: {
        num: 99
      }
    }
    const obj4 = {
      name: 'tom',
      age: {
        num: 99
      }
    }
    const readonlyState = readonly(obj3);
    const shallowReadonlyState = shallowReadonly(obj4);
    readonlyState.age.num = 3;
    readonlyState.name = 'Jerry';
    
    shallowReadonlyState.age.num = 3;
    readonlyState.name = 'Jerry';
    
  </script>
</body>
</html>